<template>
  <header class="common-header">
    <div class="bg1"></div>
    <div class="bg2">
      <div class="header_box container_box row">
        <div class="col-4 left">
          <div class="logo">
            <img
              src="https://flowerexpo2021.shcm.gov.cn/resource/flowerexpo/img/index_logo.png"
              alt=""
            />
          </div>
        </div>
        <div class="col-6 right">
          <div class="top_link">
            <div class="search">
              <i class="iconfont icon-search" id="searchDataBtn1"></i>
            </div>
            <div class="dateinfo">
              <span class="mr10">{{a}}</span>
              <span>{{bb}}</span>
              <span v-if="!loginS" class="ml20 curp pr10 login" @click="login">登录</span>
              <span v-if="!loginS" class="ml10 curp logout" @click="register">注册</span>
              <el-dropdown v-if="loginS" >
                <span class="curp fs12 cl3 ml10">
                  <i class="el-icon-user-solid"></i><i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item><router-link to="/order">个人中心</router-link></el-dropdown-item>
                    <el-dropdown-item>
                      <p @click="logout">退出登录</p>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="nav flex">
            <ul>
              <li :class="{selected: select=='home'}" @click="go('home')">首页</li>
              <li :class="{selected: select=='mustknow'}" @click="go('mustknow')">购票须知</li>
              <li :class="{selected: select=='crew'}" @click="go('crew')">团队咨询</li>
              <li :class="{selected: select=='real'}" @click="go('real')">实体票购买</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
import { getLogonInfo } from '@/http/protocol'
import moment from 'moment'
const cc = ['', '一', '二', '三', '四', '五', '六']
console.log(getLogonInfo)

export default {
  name: 'Header',
  data () {
    return {
      select: 'home',
      a: moment().format('YYYY年MM月DD号'),
      bb: `星期${moment().day() ? cc[moment().day()] : '日'}`
    }
  },
  computed: {
    ...mapState('user', ['loginVisible', 'loginS'])
  },
  methods: {
    go (key) {
      // location.href = `/${key}`
      this.$router.push(`/${key}`)
      this.select = key
    },
    login () {
      this.increment()
    },
    register () {
      this.showrigieter()
    },
    ...mapActions('user', ['increment']),
    ...mapMutations('user', ['showrigieter', 'logout', 'setLoginS'])
  },
  async mounted () {
    console.log(this.bb)
    const res = await getLogonInfo()
    if (res.success) {
      this.setLoginS(true)
    } else {
      this.setLoginS(false)
    }
  }
}
</script>

<style scoped lang="less">
.common-header {
  height: 300px;
  width: 100%;
  position: relative;
  .selected {
    color: #009769 !important;
  }
  .bg1 {
    height: 240px;
    width: 100%;
    background-image: url(../assets/zone1.png);
    background-position: center;
    background-size: cover;
  }
  .bg2 {
    height: 300px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: #333;
    background-image: linear-gradient(#d9ffd4 0%, rgba(217, 255, 212, 0) 100%);
    .header_box {
      padding: 20px 0 10px;
      margin: auto;
      width: 1275px;
      .left {
        text-align: left;
      }
      .right {
        text-align: right;
        .top_link {
          margin-bottom: 20px;
        }
        .nav {
          ul {
            width: 100%;
          }
          li {
            display: inline-block;
            color: #333;
            transition: 0.5s all;
            width: calc(100% / 6);
            text-align: center;
            font-size: 18px;
            font-weight: 900;
            &:hover {
              color: #009769;
              cursor: pointer;
            }
          }
        }
      }
    }
    .container_box {
      margin: auto;
    }
    .row {
      display: flex;
      flex-wrap: wrap;
      .col-4 {
        width: 40%;
      }
      .col-6 {
        width: 60%;
      }
    }
  }
  .login {
    border-right: 1px solid #333;
    &:hover {
      color: #009769;
    }
  }
  .logout {
     &:hover {
      color: #009769;
      cursor: pointer;
    }
  }
}
</style>
